<script setup lang="ts">
const props = defineProps({
  // 图片数组的信息
  srcArr: {
    type: Array,
    required: true
  },
  // 图片显示的大小
  height: {
    type: String,
    default: () => '2em',
  }
})
</script>
<template>
  <ul class="inside-modal">
    <li class="icon-li" v-for="(item) in srcArr" key="item.id">
      <img class="img" :src="item.src" alt="item.name"/>
    </li>
  </ul>
</template>
<style scoped lang="scss">
.inside-modal {
  display: flex;
  background-color: #4f6188;
  padding: 0.5em 0.6em 0.2em;
  border-radius: 0.4em;

  > * + * {
    margin-left: 1em;
  }

  .icon-li {
    cursor: pointer;

    .img {
      height: v-bind(height)
    }
  }
}

.inside-modal::after {
  content: ' ';
  position: absolute;
  bottom: -2em;
  left: 48%;
  border: 1em solid;
  border-color: rgba(0, 0, 0, 0.3) transparent transparent transparent;
}
</style>